@use 'sass:math' as math;
@import '../matrix-common.scss';
.technique-cell {
    @include adaptive-color('background-color', white, color(dark-2));
    @include adaptive-color('color', black, on-color(dark-3));
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;

    position: relative;

    font-size: $sizeunit - 1px;
    line-height: $sizeunit;

    min-width: $sizeunit;
    min-height: $sizeunit;
    @media print {
        font-size: $sizeunit_print - 5px;
    }

    > div {
        padding: math.div($sizeunit, 2) 3px;
        box-sizing: border-box;
        display: block;
        width: 100%;
        height: 100%;
    }

    &.showID:not(.showName) {
        text-align: center;
    }

    .id-name-break {
        outline-offset: -0.5px;
        outline: 1px solid rgba(border-color(body), 0.5);
    }

    &:not(.editing):not(.colored):not(.supertechniquecell) {
        @include adaptive-color('box-shadow', 0 0 0 1px border-color(body) inset, 0 0 0 1px border-color(dark-2) inset);
    }

    &.editing {
        @include adaptive-color('box-shadow', 0 0 0 1px black inset, 0 0 0 1px color(cell-highlight-dark-color) inset);
    }

    &.underlined {
        &.mini div:before {
            position: absolute;
            content: 'i';
            font-size: $sizeunit - 1px;
            text-align: center;
            width: 100%;
            top: 0;
            left: 0;
        }
        div span {
            border-bottom: 2px solid transparent;
        }
    }

    &.mini.disabled div:before {
        position: absolute;
        content: '\2715';
        font-size: $sizeunit -1px;
        text-align: center;
        width: 100%;
        top: 0;
        left: 0;
    }

    &.highlight {
        @include adaptive-color('background', color(cell-highlight-color), color(cell-highlight-dark-color));
        .id-name-break {
            outline: 1px solid rgba(black, 0.5);
        }
    }

    &.unannotated {
        .sub {
            color: gray;
        }
    }
}

.sub {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
    bottom: -0.5em;
    @media print {
        display: none;
    }
}
